<template>
  <div class="salesAnalysis">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="12">
        <a-card>
          <div slot="title">
            <span>门店支付金额排行榜</span>
          </div>
          <div>
            <a-table
              rowKey="id"
              :columns="tableOption1"
              :dataSource="loadData1"
              :pagination="false"
              :loading="loading1"
            ></a-table>
          </div>
        </a-card>
      </el-col>
      <el-col :xs="24" :sm="12">
        <a-card>
          <div slot="title">
            <span>门店支付金额占比top 10</span>
          </div>
          <div>
            <DiskChart
              class="goods"
              :dataList="loadData2"
              :dataValue="loadDataValue"
              :totalSales="totalSales"
              style="maxWidth:650px"
              height="400px"
            />
          </div>
        </a-card>
      </el-col>
      <el-col :xs="24" :sm="12">
        <a-card>
          <div slot="title">
            <span>门店销量榜 top 20</span>
          </div>
          <div>
            <a-table
              rowKey="id"
              :columns="tableOption3"
              :dataSource="loadData3"
              :pagination="false"
              :loading="loading3"
            ></a-table>
          </div>
        </a-card>
      </el-col>
      <el-col :xs="24" :sm="12">
        <a-card>
          <div slot="title">
            <span>门店营收榜top 20</span>
          </div>
          <div>
            <a-table
              rowKey="id"
              :columns="tableOption4"
              :dataSource="loadData4"
              :pagination="false"
              :loading="loading4"
            ></a-table>
          </div>
        </a-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import DiskChart from '@/components/Charts/DiskChart.vue'
import { tableOption1, tableOption3, tableOption4 } from './index.config.js'
export default {
  components: {
    DiskChart
  },
  data() {
    return {
      tableOption1,
      tableOption3,
      tableOption4,
      loadData1: [],
      loadData2: ['饮料', '休闲食品', '啤酒大类', '网红商品', '其他类目'],
      loadDataValue: [
        { value: 335, name: '饮料' },
        { value: 310, name: '休闲食品' },
        { value: 234, name: '啤酒大类' },
        { value: 135, name: '网红商品' },
        { value: 1548, name: '其他类目' }
      ],
      loadData3: [],
      loadData4: [],
      loading1: false,
      loading3: false,
      loading4: false,

      totalSales: `${12312312}\n\n总销量` //总销量
    }
  },
  methods: {}
}
</script>
<style lang="less">
.salesAnalysis {
  .box-card {
    min-height: 500px;
  }
}
</style>